import React, { useState, useRef, useEffect } from 'react';
import { Modal, Form } from 'antd';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
const SelectModel = (props) => {
  const {
    loading,
    dispatch,
    list,
    departmentList,
    visible = false,
    onClose,
    chatList,
    onOk,
  } = props;
  const { show, details = {} } = visible;
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRows);
    },
  };
  useEffect(() => {
    if (show) {
      if (details && details.chatId) {
        return setSelectedRowKeys([details]);
      }
    } else {
      setSelectedRowKeys([]);
    }
  }, [show]);
  const childRef = useRef();
  const modalProps = {
    title: `选择群聊`,
    width: 1200,
    visible: typeof visible === 'boolean' ? visible : show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    okText: '确认',
  };
  const filterList = (list) => {
    return list.map((item) => {
      const { departmentName: label, qywxDepartmentId: value, subDepartmentList: children } = item;
      const localItem = {
        label,
        value,
        children: children ? filterList(children) : undefined,
      };
      return localItem;
    });
  };
  // 搜索参数
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };
  useEffect(() => {
    dispatch({
      type: 'system/fetchQywxDepartment',
    });
  }, []);
  const searchItems = [
    {
      label: '部门',
      name: 'departmentId',
      type: 'cascader',
      changeOnSelect: true,
      select: filterList(departmentList),
    },
  ];
  // table 表头
  const getColumns = [
    {
      title: '群名称',
      dataIndex: 'chatName',
    },

    {
      title: '群人数',
      dataIndex: 'userAmount',
    },
    // {
    //   title: '群主',
    //   dataIndex: 'chatUserAmount',
    // },
  ];
  return (
    <>
      <Modal
        {...modalProps}
        onCancel={onClose}
        onOk={() => {
          onOk && onOk(selectedRowKeys[0]);
          onClose();
        }}
      >
        <TableDataBlock
          rowSelection={{
            type: 'radio',
            ...rowSelection,
            selectedRowKeys: selectedRowKeys.map((item) => {
              return item.chatId;
            }),
          }}
          cRef={childRef}
          loading={loading}
          searchItems={searchItems}
          columns={getColumns}
          rowKey={(record) => `${record.chatId}`}
          dispatchType="system/fetchListChat"
          {...chatList}
        ></TableDataBlock>
      </Modal>
    </>
  );
};

export default connect(({ loading, system }) => ({
  loading: loading.models.system,
  ...system,
}))(SelectModel);
